接收外部拖拽内容#

onDropContent 是 Scripting 提供的一个视图修饰符，用于使某个视图成为接收来自其他 App 拖入的文件、图片或文本的拖放目标。该功能特别适用于 iPadOS 和 macOS 上支持多窗口、多任务操作的场景，提升交互体验。

功能概览#

使用 onDropContent 可以：

• 接收从其他 App 拖拽进来的图片、文件或文本；
• 指定仅接受特定类型的内容（使用 UTI 类型标识符）；
• 实时感知拖拽指针是否悬停在视图上方；
• 在内容被成功放下后处理拖入数据。

修饰符定义#

1onDropContent?: {
2  types: UTType[]
3  isTarget: {
4    value: boolean
5    onChanged: (value: boolean) => void
6  }
7  onResult: (result: {
8    texts: string[]
9    images: UIImage[]
10    fileURLs: string[]
11  }) => void
12}

参数说明#

内容结果结构#

1{
2  texts: string[]
3  images: UIImage[]
4  fileURLs: string[]
5}

• texts：拖拽文本内容的字符串数组；
• images：拖拽进来的图片，格式为 UIImage；
• fileURLs：拖入文件的本地路径（字符串形式）。

示例用法#

1const [isTarget, setIsTarget] = useState(false)
2
3return <VStack
4  onDropContent={{
5    types: ["public.image"],
6    isTarget: {
7      value: isTarget,
8      onChanged: setIsTarget
9    },
10    onResult: (result) => {
11      console.log(`接收到 ${result.images.length} 张图片`)
12    }
13  }}
14>
15  <Text>
16    {isTarget ? "请将图片拖到此处" : "拖拽一张图片进入此区域"}
17  </Text>
18</VStack>

上述示例中：

• 该 VStack 仅接收 "public.image" 类型的拖拽内容；
• 当拖拽指针进入该区域时，isTarget 被设为 true，用于动态更新 UI；
• 图片被放下后，回调函数处理拖入结果。

使用提示#

• types 字段中的类型字符串遵循 Apple 的 Uniform Type Identifier (UTType) 规范；
• 支持常见类型如 "public.image"、"public.text"、"com.adobe.pdf" 等；
• 拖放功能在 iPad 和 Mac 上体验最佳，尤其适用于文件管理、图片收集、文档导入等场景。